<template>
  <div class="box">
        <img class="box-imgs" src="/static/imgs_s10/S_10takeaway03.06.png" alt="">
        <div class="box-a">
            <span class="a-span1">选择收货地址</span>
            <img class="a-imgs1" src="/static/imgs_s10/S_10takeaway03.04.png" alt=""><br>
            <p class="a-p1"></p>
            <!-- <p class="a-p2">配送时间</p> -->
            <span class="a-span3">尽快送到 | 预计18:20</span>
            <img class="a-imgs2" src="/static/imgs_s10/S_10takeaway03.04.png" alt="">

        </div>
        <div class="box-b">
            <div class="b-b1">
                <span class="b1-span1"></span>
                <span class="b1-span2">汇方圆</span>
            </div>
            <div class="b-b2">
                <img class="b2-imgs1" src="/static/imgs_s10/S_10order1.01.png" alt="">
                <div class="b2-a">
                    <p class="b2-a-p1">内蒙古烤羊肉串</p>
                    <p class="b2-a-p2">¥36.00</p>
                </div>
                <img class="b2-imgs2" src="/static/imgs_s10/S_10takeaway03.02.png" alt="">
                <div class="b2-b">
                    <img class="b2-b-imgs1" src="/static/imgs_s10/S_10takeaway03.01.png" alt="">
                    <span>1</span>
                    <img class="b2-b-imgs2" src="/static/imgs_s10/S_10takeaway03.03.png" alt="">
                </div>
            </div>
            <div class="b-b3">
                <img class="b3-imgs1" src="/static/imgs_s10/S_10order1.02.png" alt="">
                <div class="b3-a">
                    <p class="b3-a-p1">长沙臭豆腐</p>
                    <p class="b3-a-p2">¥24.00</p>
                </div>
                <img class="b3-imgs2" src="/static/imgs_s10/S_10takeaway03.02.png" alt="">
                <div class="b3-b">
                    <img class="b3-b-imgs1" src="/static/imgs_s10/S_10takeaway03.01.png" alt="">
                    <span>2</span>
                    <img class="b3-b-imgs2" src="/static/imgs_s10/S_10takeaway03.03.png" alt="">
                </div>
            </div>
            <div class="b-b4">
                <img class="b4-imgs1" src="/static/imgs_s10/S_10order1.03.png" alt="">
                <div class="b4-a">
                    <p class="b4-a-p1">关东煮</p>
                    <p class="b4-a-p2">¥9.90</p>
                </div>
                <img class="b4-imgs2" src="/static/imgs_s10/S_10takeaway03.02.png" alt="">
                <div class="b4-b">
                    <img class="b4-b-imgs1" src="/static/imgs_s10/S_10takeaway03.01.png" alt="">
                    <span>2</span>
                    <img class="b4-b-imgs2" src="/static/imgs_s10/S_10takeaway03.03.png" alt="">
                </div>
            </div>
        </div>
        <div class="box-c">
            <span>用餐方式</span>
            <span>外卖</span>
        </div>
        <div class="box-d">
            <div class="d1">
                <span>包装费</span>
                <span>￥3.00</span>
            </div>
            <div class="d2">
                <span>配送费</span>
                <span>￥3.00</span>
            </div>
            <div class="d3">
                <span>优惠券</span>
                <span class="d3-span2">1张可用</span>
                <img src="/static/imgs_s10/S_10takeaway03.04.png" alt="">
            </div>
        </div>
        <div class="box-e">
            <div class="e1">
                <span class="e1-span1">用餐人数</span>
                <span class="e1-span2">便于商家准备餐具</span>
                <img src="/static/imgs_s10/S_10takeaway03.04.png" alt="">
            </div>
            <div class="e2">
                <span class="e2-span1">备注信息</span>
                <span class="e2-span2">口味、偏好等要求</span>
            </div>
        </div>
        <div class="box-f">
            <div class="f1">
                <span class="f1-span1">订单总额</span>
                <span class="f1-span2">¥79.80</span>
            </div>
            <div class="f2">
                <span class="f2-span1">优惠金额</span>
                <span class="f2-span2">-¥0.00</span>
            </div>
            <div class="f3">
                <span class="f3-span1">需付款</span>
                <span class="f3-span2">¥79.80</span>
            </div>
        </div>
        <div class="box-g">
            <div class="g1">
                <span class="g1-span1"> 合计：</span>
                <span class="g1-span2">¥79.80</span>
                <p>共 3 份商品</p>
            </div>
            <div class="g2" id="g2">
                <span>提交订单</span>
            </div>
        </div>






        <!-- 确认订单页面 -->
        <div class="i" id="i">
            <span class="i-span1">河南省郑州市二七区二七万达一楼56号</span>
            <img class="i-imgs1" src="/static/imgs_s10/S_10takeaway03.04.png" alt=""><br>
            <span class="i-span2">张磊</span><span class="i-span3">15512356788</span>
            <p class="i-p1"></p>
            <p class="i-p2">配送时间</p>
            <span class="i-span4">尽快送到 | 预计18:20</span>
            <img class="i-imgs2" src="/static/imgs_s10/S_10takeaway03.04.png" alt="">
        </div>

        <div class="mask" id="mask"></div>
        <div class="cart" id="cart">
            <div class="h1">
                <span>选择预计送达时间</span>
            </div>
            <div class="h2">
                <div class="h2-div1">
                    <span class="h2-span1">今天(周五)</span>
                    <span class="h2-span2"></span>
                </div>
                <div class="h2-div2">
                    <span>立即送出</span>
                    <p>21:30</p>
                    <p>21:50</p>
                    <p>22:00</p>
                </div>
                <div class="h2-div3">
                    <span>4.5元配送费</span>
                    <img src="/static/imgs_s10/S_10takeaway03.07.png" alt="">
                    <p>4.5元配送费</p>
                    <p>4.5元配送费</p>
                    <p>4.5元配送费</p>
                </div>
            </div>
            <div class="h3">
                <span id="span">取消</span>
                <span>确定</span>
            </div>
        </div>

    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            position: relative;
            width: 375px;
            height: 1066px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 auto;
            background: #eeeeee;
        }

        .box-imgs {
            position: absolute;
            left: 0;
            top: 0;
            width: 375px;
            height: 263px;
        }

        .box-a,
        .box-b,
        .box-c,
        .box-d,
        .box-e,
        .box-f {
            position: relative;
            margin-top: 9px;
            width: 350px;
            background: rgba(255, 255, 255, 1);
            border-radius: 9px;
        }

        /* 第一区块 */
        .box-a {
            margin-top: 71px;
            height: 115px;
        }

        .a-span1 {
            margin-left: 14px;
            margin-top: 29px;
            width: 100px;
            height: 16px;
            font-size: 17px;
            font-weight: 500;
            color: rgba(163, 165, 168, 1);
        }

        .a-imgs1 {
            margin-top: 30px;
            margin-left: 7px;
            width: 8px;
            height: 13px;
        }

        .box-a .a-p1 {
            position: absolute;
            left: 9px;
            top: 69px;
            width: 332px;
            height: 1px;
            background: rgba(225, 225, 225, 1);
            display: inline-block;
        }

        .box .a-p2 {
            margin-top: 36px;
            margin-left: 14px;
            width: 54px;
            height: 13px;
        }

        .a-span3 {
            position: absolute;
            left: 190px;
            top: 85px;
            width: 135px;
            height: 16px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
            line-height: 16px;
        }

        .a-imgs2 {
            position: absolute;
            left: 332px;
            top: 86px;
            width: 7px;
            height: 12px;
        }

        /* 第二区块 */
        .box-b {
            height: 305px;
            display: flex;
            flex-direction: column;
        }

        .b-b1 .b1-span1 {
            position: absolute;
            left: 9px;
            top: 13px;
            width: 23px;
            height: 23px;
            background: rgba(216, 216, 216, 1);
            border-radius: 3px;
        }

        .b-b1 .b1-span2 {
            position: absolute;
            left: 39px;
            top: 18px;
            width: 50px;
            height: 15px;
            font-size: 16px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 15px;
        }

        /* 食品区块 */
        .b-b2,
        .b-b3,
        .b-b4 {
            position: absolute;
            left: 0px;
            width: 375px;
            height: 66px;
        }

        .b-b2 {
            top: 58px;
        }

        .b-b3 {
            top: 144px;
        }

        .b-b4 {
            top: 229px;
        }

        /* 食品图 */

        .b2-imgs1,
        .b3-imgs1,
        .b4-imgs1 {
            position: absolute;
            top: 0;
            left: 9px;
            width: 66px;
            height: 66px;
        }

        /* 图右字 */
        .b2-a-p1,
        .b3-a-p1,
        .b4-a-p1 {
            position: absolute;
            left: 85px;
            top: 5px;
            width: 120px;
            height: 14px;
            font-weight: bold;
            background: rgba(255, 255, 255, 1);
            border-radius: 9px;
        }

        .b2-a-p2,
        .b3-a-p2,
        .b4-a-p2 {
            position: absolute;
            left: 84px;
            top: 32px;
            width: 48px;
            height: 11px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(232, 91, 77, 1);
            line-height: 20px;
        }

        .b2-imgs2,
        .b3-imgs2,
        .b4-imgs2 {
            position: absolute;
            left: 319px;
            top: 3px;
            width: 19px;
            height: 19px;
        }

        /* 加减号区块 */
        .b2-b,
        .b3-b,
        .b4-b {
            position: absolute;
            left: 275px;
            top: 46px;
            width: 62px;
            height: 21px;
        }

        .b2-b-imgs1,
        .b3-b-imgs1,
        .b4-b-imgs1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 21px;
            height: 21px;
        }

        .b2-b span,
        .b3-b span,
        .b4-b span {
            position: absolute;
            left: 29px;
            top: 5px;
            width: 1px;
            height: 10px;
            line-height: 10px;
        }

        .b2-b-imgs2,
        .b3-b-imgs2,
        .b4-b-imgs2 {
            position: absolute;
            right: 0;
            top: 0;
            width: 21px;
            height: 21px;
        }

        /* 第三区块 */
        .box-c {
            height: 48px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 13px;
            box-sizing: border-box;
        }

        .box-c span {
            width: 57px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .box-c span:nth-child(2) {
            font-weight: 500;
            width: 27px;
        }

        /* 第四区块 */
        .box-d {
            height: 145px;
            display: flex;
            flex-direction: column;
            border-radius: 9px;
        }

        .d1,
        .d2,
        .d3 {
            width: 100%;
            height: 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 13px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(237, 237, 237, 1);
        }

        .d3 {
            border: none;
        }

        .box-d span {
            width: 40px;
            height: 12px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .box-d .d3-span2 {
            width: 55px;
            height: 13px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-left: 200px;
            line-height: 13px;
        }

        .box-d img {
            width: 7px;
            height: 12px;
        }

        /* 第五区块 */
        .box-e {
            height: 157px;
            display: flex;
            flex-direction: column;
            padding: 0 14px;
            box-sizing: border-box;
        }

        .e1 {
            width: 100%;
            height: 49px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(237, 237, 237, 1);
            ;
        }

        .e1-span1 {
            width: 60px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .e1-span2 {
            width: 120px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-left: 140px;
        }

        .e1 img {
            width: 7px;
            height: 12px;
        }

        .e2 {
            width: 100%;
            height: 108px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .e2-span1 {
            font-size: 13px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin-top: 15px;
        }

        .e2-span2 {
            font-size: 13px;
            font-weight: 500;
            color: rgba(163, 165, 168, 1);
            margin-top: 13px;
        }

        .box-f {
            height: 125px;
            display: flex;
            flex-direction: column;
            padding-left: 13px;
            padding-right: 16px;
            box-sizing: border-box;
        }

        .f1,
        .f2,
        .f3 {
            width: 100%;
            height: 38px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .f2 {
            border-bottom: 1px solid rgba(237, 237, 237, 1);
        }

        .f3 {
            height: 49px;
        }

        .f1-span1,
        .f2-span1 {
            font-size: 13px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .f1-span2,
        .f2-span2 {
            font-size: 14px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .f3-span1 {
            font-size: 13px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .f3-span2 {
            font-size: 17px;
            font-weight: bold;
            color: rgba(246, 83, 88, 1);
        }

        .box-g {
            position: fixed;
            bottom: 0;
            width: 375px;
            height: 45px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 0px 0px rgba(237, 237, 237, 1);
        }

        .g1-span1 {
            position: absolute;
            left: 24px;
            top: 10px;
            width: 40px;
            height: 11px;
            font-size: 12px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .g1-span2 {
            position: absolute;
            left: 56px;
            top: 9px;
            width: 48px;
            height: 11px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(246, 83, 88, 1);
        }

        .g1 p {
            position: absolute;
            left: 24px;
            top: 32px;
            width: 65px;
            height: 10px;
            font-size: 10px;
            font-weight: 500;
            color: rgba(144, 144, 144, 1);
            line-height: 1px;
        }

        .g2 {
            position: absolute;
            left: 248px;
            top: 0px;
            width: 127px;
            height: 45px;
            background: rgba(50, 177, 108, 1);
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            display: flex;
            justify-content: center;
            align-items: center;
        }




        /* 确认订单页面 */
        /*背景 */
        .i {
            position: absolute;
            left: 12px;
            top: 71px;
            width: 350px;
            height: 115px;
            background: rgba(255, 255, 255, 1);
            border-radius: 9px;
            padding-top: 10px;
            box-sizing: border-box;
            z-index: 10;
            display: block;
        }

        .i-span1 {
            margin-left: 14px;
            width: 100px;
            height: 16px;
            font-size: 16px;
            font-weight: 500;
        }

        .i-span2 {
            margin-left: 14px;
            margin-top: 5px;
            font-size: 10px;

        }

        .i-span3 {
            margin-left: 10px;
        }

        .i-imgs1 {
            margin-left: 7px;
            width: 8px;
            height: 13px;
        }

        .i-p1 {
            position: absolute;
            left: 9px;
            top: 69px;
            width: 332px;
            height: 1px;
            background: rgba(225, 225, 225, 1);
            display: inline-block;
        }

        .i-p2 {
            margin-top: 36px;
            margin-left: 14px;
            font-size: 14px;
            font-weight: bold;
            width: 70px;
            height: 13px;
        }

        .i-span4 {
            position: absolute;
            left: 190px;
            top: 85px;
            width: 135px;
            height: 16px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
            line-height: 16px;
        }

        .i-imgs2 {
            position: absolute;
            left: 332px;
            top: 86px;
            width: 7px;
            height: 12px;
        }

        /* 蒙版 */
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 375px;
            height: 385px;
            background: rgba(221, 221, 221, 0.8);
            display: none;
            z-index: 20;
        }

        .cart {
            position: absolute;
            top: 372px;
            left: 0;
            width: 375px;
            height: 295px;
            background: rgba(255, 255, 255, 1);
            border-radius: 15px 15px 0px 0px;
            display: none;
        }

        .h1 {
            height: 44px;
            width: 375px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            border-radius: 15px 15px 0px 0px;
            border-bottom: 1px solid rgba(225, 225, 225, 1);

        }

        .h2 {
            height: 205px;
            width: 375px;
            border-bottom: 1px solid rgba(225, 225, 225, 1);
            display: flex;
        }

        .h2-div1 {
            width: 121px;
            height: 205px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

        }

        .h2-span1 {
            width: 70px;
            margin-top: 18px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .h2-span2 {
            width: 121px;
            height: 157px;
            background: rgba(245, 245, 245, 1);
        }

        .h2-div2 {
            width: 148px;
            height: 205px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-left: 28px;
            padding-right: 69px;
            box-sizing: border-box;
        }

        .h2-div2 span {
            margin-top: 19px;
            width: 51px;
            height: 12px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(50, 177, 108, 1);
        }

        .h2-div2 p {
            margin-top: 35px;
            width: 33px;
            height: 10px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
        }

        .h2-div3 {
            width: 106px;
            height: 205px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
        }

        .h2-div3 span,
        .h2-div3 p {
            margin-top: 34px;
            width: 71px;
            height: 12px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(107, 107, 107, 1)
        }

        .h2-div3 span {
            margin-top: 18px;
            color: rgba(50, 177, 108, 1);
        }

        .h2-div3 img {
            position: absolute;
            right: 13px;
            bottom: 175px;
            width: 11px;
            height: 11px;
        }

        .h3 {
            width: 375px;
            height: 45px;
            display: flex;
        }

        .h3 span {
            width: 100%;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .h3 span:nth-child(2) {
            color: rgba(50, 177, 108, 1);
        }
    </style>
